import React, { Component } from 'react';
import { Table, Pagination, Message, Dialog, Button, Balloon } from '@alifd/next';
import IceContainer from '@icedesign/container';
import BasicDetailInfo from '../BasicDetailInfo';
import { ApiOfPoolList } from '#/utils/agentApiDefine'
import SearchTableWrapper from '#/hoc/SearchTableWrapper'
import moment from 'moment';

const responseFormatter = (responseHandler, res, originResponse) => {
  let refactorMap = {}
  res.data.forEach(item => {
    if (!refactorMap[item.node]) {
      refactorMap[item.node] = [item]
    } else {
      refactorMap[item.node].push(item)
    }
  })
  let refactorList = []
  Object.entries(refactorMap).forEach(item => {
    refactorList.push({
      node: item[0],
      children: item[1]
    })
  })
  res = {
    success: res.status,
    data: {
      "list": refactorList.sort((a,b)=>a.node > b.node)
    }
  };
  responseHandler(res, originResponse);
}

const defaultBindingData = {
  list: []
}

@SearchTableWrapper(ApiOfPoolList, { responseFormatter, defaultBindingData })
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor() {
    super();
    this.state = {
      loading: false,
      detailDialogVisible: false,
      editInstance: {},
    };
  }

  // 渲染操作按钮示例
  renderOper = (value, index, item) => {
    let that = this;
    return (
      <div>
        <Button onClick={() => this.onOpenDetailDialog(item)} type="primary" text>查看更多</Button>
      </div>
    );
  }

  onOpenDetailDialog = (item) => {
    this.setState({
      detailDialogVisible: true,
      editInstance: item
    });
  }

  onCloseDetailDialog = reason => {
    this.setState({
      detailDialogVisible: false
    });
    if (reason == 'success') {
      Message.success('操作成功!');
      this.props.fetch();
    }
  }

  groupHeaderRender = function (item) {
    return <div>{item.node != 'null' ? item.node : 'local'}</div>;
  }

  renderNumActivePerKey = numActivePerKey => {
    return <span style={styles.dynamic}>{Object.keys(numActivePerKey).length} 个</span>;
  }

  renderNumIdle = numIdle => {
    return <span style={styles.dynamic}>{numIdle} 个 </span>;
  }

  renderNumWaiters = numWaiters => {
    return <span style={styles.dynamic, {color: '#b24847'}}>{numWaiters} 个</span>;
  }

  render() {
    const { instances } = this.props.bindingData;
    return (
      <IceContainer style={styles.container}>
        <Table
          dataSource={instances.list}
          loading={this.state.loading}
          hasBorder={false}
          style={{ padding: '20px' }}
        >
          <Table.GroupHeader cell={this.groupHeaderRender} />
          <Table.Column title="名称" dataIndex="name" />
          <Table.Column width={120} title="最大连接数" dataIndex="maxTotal" />
          <Table.Column width={160} title="单网关最大连接数" dataIndex="maxTotalPerKey" />
          <Table.Column width={120} title="活跃网关数" cell={this.renderNumActivePerKey} dataIndex="numActivePerKey" />
          <Table.Column width={120} title="空闲连接数" cell={this.renderNumIdle} dataIndex="numIdle" />
          <Table.Column width={120} title="等待线程数" cell={this.renderNumWaiters} dataIndex="numWaiters" />
          <Table.Column
            width={200}
            title="操作"
            cell={this.renderOper}
          />
        </Table>
        <Dialog
          style={{ width: '60%' }}
          title="连接池详细信息"
          visible={this.state.detailDialogVisible}
          footer={false}
          onClose={this.onCloseDetailDialog}>
          <BasicDetailInfo formData={this.state.editInstance} operationCallback={this.onCloseDetailDialog} />
        </Dialog>

      </IceContainer>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0 0 20px',
  },
  title: {
    margin: '0',
    padding: '15px 20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
  },
  separator: {
    margin: '0 3px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    textAlign: 'right',
    marginRight: '20px',
  },
  editIcon: {
    color: '#2874D1',
    cursor: 'pointer',
  },
  horizontal: {
    dl: {
      margin: '0',
    },
    dt: {
      float: 'left',
      width: '80px',
      overflow: 'hidden',
      clear: 'left',
      textAlign: 'right',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    },
    dd: {
      marginLeft: '100px',
    }
  },
  dynamic: {
    color: '#80b347',
    fontSize: '14px',
  }
};
